<template>
  <div>
    <!-- 总布局 -->
    <el-row class="layout">
      <el-card>
        <el-row style="width: 100%; height: 30px; background-color: white">
          <!-- 店铺名称 -->
          <div style="float: left; line-height: 30px">
            <span>{{ nowData.shopName }}</span>
          </div>
          <!-- 店铺星级 -->
          <div style="float: left; margin-left: 10%; line-height: 40px">
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </div>
          <!-- 关注店铺 -->
          <div style="margin-left: 80%">
            <el-button icon="el-icon-star-off">关注店铺</el-button>
          </div>
        </el-row>
      </el-card>

      <el-row style="float: left; width: 30%; height: 560px">
        <!-- 商品封面图 -->
        <el-card>
          <div style="width: 100%; height: 250px">
            <pic-zoom :url="this.nowData.goodsImages" :scale="2.5"></pic-zoom>
          </div>
        </el-card>

        <!-- 商品详情轮播图 -->
        <div class="pic-box">
          <el-card style="margin-top: 0.2%">
            <el-carousel :interval="4000" height="200px">
              <el-carousel-item v-for="item in imagebox" :key="item.id">
                <pic-zoom
                  :url="item.idView"
                  :scale="2.5"
                  class="image"
                ></pic-zoom>
              </el-carousel-item>
            </el-carousel>
          </el-card>
        </div>
      </el-row>

      <el-row style="float: left; width: 58%; height: 560px; margin-left: 2%">
        <!-- 商品名称 -->
        <div style="margin-top: 10px">
          <h3>
            <!-- 品牌+名字 +sku  -->
            {{ nowData.brandName }} {{ nowData.goodsName }}
          </h3>
        </div>

        <div>
          <!-- 当前售价 -->
          <span style="float: left"> 当前售价:￥{{ nowData.newPrice }} </span>
          <!-- 降价通知 -->
          <br /><br /><el-button type="text" @click="open" style="float: left"
            >降价通知</el-button
          >
          <!-- 原价 -->
          <br /><br /><span style="float: left; margin-top: 15px">
            原价:￥{{ nowData.oldPrice }}
          </span>
          <br />
          <!-- 库存 -->
          <br />
          <span style="margin-top: 25px; float: left">
            库存: {{ nowData.goodsStock }}
          </span>
          <br />
          <br />
          <br />

          <!-- 计数器 -->
          <el-input-number
            v-model="num"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="10"
            style="float: left"
          >
          </el-input-number>

          <!-- 加入购物车 -->
          <el-button
            type="danger"
            icon="el-icon-shopping-cart-full"
            style="margin-left: 5%"
            @click="Shopping"
            >加入购物车</el-button
          >

          <!-- 立即购买 -->
          <el-button
            type="warning"
            style="margin-left: 5%"
            @click="dialogVisible = true"
            >立即购买</el-button
          >

          <br /><br /><br />
          <!-- 弹出框 -->
          <el-dialog
            title="扫描二维码支付"
            :visible.sync="dialogVisible"
            width="300px"
            :before-close="handleClose"
          >
            <span>
              <img :src="this.$host + '132742425082459357.png'" />
            </span>
          </el-dialog>

          <span
            style="
              float: left;
              font-size: 14px;
              margin-top: 20px;
              font-family: 正楷;
            "
          >
            温馨提示--支持7天无理由退货(拆封后不支持)
          </span>
        </div>
      </el-row>

      <el-row class="main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 商品介绍 -->
          <el-tab-pane label="商品介绍" name="first">
            <el-card style="height: 700px">
              <span> 品牌：{{ nowData.brandName }} </span>
              <br /><br />
              <div>
                <p>
                  <span> 商品名称: {{ nowData.goodsName }} </span>
                </p>

                <p>
                  <span style="margin-left: 3%">
                    商品编号: {{ nowData.goodsNumber }}
                  </span>
                </p>

                <p>
                  <span style="margin-left: 3%"> 商品毛重: 250.00g </span>
                </p>

                <p>
                  <span style="margin-left: 3%"> 商品产地: 中国大陆 </span>
                </p>
              </div>

              <br /><br />
              <span> CPU型号:其他 </span>
              <div>
                <span style="margin-left: 10.5%"> 运行内存:其他 </span>
                <span style="margin-left: 10.4%"> 机身存储:其他 </span>
                <span style="margin-left: 5.8%"> 存储卡:不支持存储卡 </span>
              </div>
              <br /><br />
              <span> 屏幕前摄组合:刘海屏 </span>
              <span style="margin-left: 6%"> 充电器：其他 </span>
              <span style="margin-left: 11%"> 系统:IOS </span>
              <span style="margin-left: 9%"> 支持IPv6:不支持IPv6 </span>
              <div>
                <img src="../assets/介绍1.png" width="20%" alt="" />
                <img
                  src="../assets/介绍2.png"
                  width="20%"
                  style="margin-left: 2%"
                  alt=""
                />
                <img
                  src="../assets/介绍3.png"
                  width="20%"
                  style="margin-left: 2%"
                  alt=""
                />
                <img
                  src="../assets/介绍4.png"
                  width="20%"
                  style="margin-left: 2%"
                  alt=""
                />
              </div>
            </el-card>
          </el-tab-pane>
          <!-- 商品评论 -->
          <el-tab-pane label="商品评论" name="second">
            <el-card style="height: 700px">
              <div>
                <span>好评度</span>
                <el-button style="margin-left: 2%">流畅至极(24)</el-button>
                <el-button style="margin-left: 2%">手感一流(14)</el-button>
                <el-button style="margin-left: 2%">内存充足(4)</el-button>
                <el-button style="margin-left: 2%">续航不足(44)</el-button>
              </div>
              <h1 style="color: red">96%</h1>
              <div>
                <!-- 用户名 -->
                <span style="">
                  用户名：
                  <!-- 几星好评 -->
                  <div>
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                </span>
                <!-- 评论内容 -->
                <span>
                  外形外观：非常喜欢，外观挺好看，价格也满意。
                  <br />
                  屏幕音效：屏幕丝滑流畅，声音比我想的还要好。
                  <br />
                  拍照效果：拍照效果，永远都是行业老大。
                  <br />
                  运行速度：在5G网络下真快。 待机时间：一天
                </span>
                <!-- 评论图片 -->
                <div>
                  <img src="../assets/9.jpg" alt="" />
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-row>
  </div>
</template>

<script>
//引入放大镜插件
import PicZoom from "vue-piczoom";
import { GetGoodsById } from "../api/goods";
import { getUserId } from "../Utils/auth";
import { AddShopping } from "../api/shopping";

export default {
  data() {
    return {
      //弹出框状态
      dialogVisible: false,
      num: 1,
      value: 4.5,
      //轮播图图片
      imagebox: [],
      //商品封面图
      screenWidth: 0,
      activeName: "second",
      nowId: 0,
      nowData: [],
    };
  },
  created() {
    this.nowId = this.$route.query.id;
    console.log(this.nowId);
  },
  methods: {
    //加入购物车
    Shopping() {
      let UserId = getUserId();
      let arr = {
        FromUsersId: UserId,
        FromGoodsId: this.nowData.id,
        number: this.num,
        FromShopsName: this.nowData.shopName,
      };
      AddShopping(arr).then((data) => {
        if (data.data.code == 1000) {
          this.$message({type:"success",message:data.data.msg})
        }else{
          this.$message({type:"error",message:data.data.msg})
        }
      });
    },
    //立即购买弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (400 / 1920) * this.screenWidth;
    },
    // 降价通知方法
    open() {
      this.$alert("降价时会以短信的形式通知您", "您好", {
        confirmButtonText: "确定",
      });
    },
    handleChange(value) {
      console.log(value);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };

    GetGoodsById(this.nowId).then(({ data }) => {
      // console.log(data);
      this.nowData = data.data[0];
      this.nowData.goodsImages = this.$host + this.nowData.goodsImages;
      // console.log(this.nowData);
      // console.log(this.nowData.shopName);

      this.nowData.images.forEach((item, index) => {
        // console.log(item.goodsImagesPath);
        // console.log(index);

        var src = this.$host + item.goodsImagesPath;
        this.imagebox.push({ id: index, idView: src });
      });
    });
  },
  components: {
    PicZoom,
  },
};
</script>

<style>
.layout {
  width: 60%;
  min-height: calc(100vh - 120px);
  margin: auto;
  margin-top: 10px;
}
body {
  background-color: white;
}
.main {
  width: 100%;
  height: 750px;
  float: left;
  margin-top: 5px;
}
/* 放大后图片的样式 */
.mouse-cover-canvas {
  position: absolute;
  width: 300px;
  left: 700px !important;
  top: 300px !important;
  border: 1px solid;
  z-index: 9999;
  display: none;
}
</style>